<template>
	<view class="tabbar">
		<view class="tabbar-item" v-for="(item, index) in thetabList" @click="toPage(item.pagePath)" :class="{'active': page == item.pagePath}" :key="index">
			<image :src="page == item.pagePath ? item.selectedIconPath : item.iconPath" :class="{'winner': index == 1}" mode=""></image>
			<view class="tabbar-item-text">{{item.text}}</view>
			<!-- <image src="@/static/image/tabbar/active-bar.png" style="width:60rpx;height:7rpx;position:absolute;top:-18rpx;" mode="" v-show="page == item.pagePath"/> -->
		</view>
	</view>
</template>

<script>
	export default {
		inheritAttrs: false,
		props: {
			page: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				tabList: [
					{
						"pagePath": "/pages/money/myFinancial",
						"iconPath": "./../../static/image/money/1-2.png",
						"selectedIconPath": "./../../static/image/money/1-1.png",
						"text": "Products",
					},
					{
						"pagePath": "/pages/money/my",
						"iconPath": "./../../static/image/money/2-2.png",
						"selectedIconPath": "./../../static/image/money/2-1.png",
						"text": "My Fund",
					}
					
				]
			}
		},
		computed: {
			thetabList() {
				// return this.$store.state.tabList;
				return this.tabList;
			}
		},
		methods: {
			toPage (path) {
				console.log(path);
				uni.navigateTo({
					url: path,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9999;
		width: 100vw;
		padding-top: 18rpx;
		padding-bottom: 8rpx;
		// height: 98rpx;
		// padding: 0 60rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 24px 35rpx rgba(194,192,193,0.08); 
		.tabbar-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// width: 100rpx;
			position: relative;
			width: 20%;
			
			.tabbar-item-icon {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background: #ff1f1f;
				position: absolute;
				right: 30rpx;
				top: 4rpx;
			}
			.tabbar-item-text {
				font-size: 20rpx;
				margin-top: 10rpx;
				line-height: 14rpx;
			}
			
			image {
				width: 46rpx;
				height: 46rpx;
				// margin-bottom: 2rpx;
			}
			font-size: 20rpx;
			text-align: CENTER;
			color: #AAAAAA;
		}
		.winner {
			// width: 46rpx !important;
			// height: 46rpx !important;
		}
		.active {
			color: #0F0F0E;
		}
	}
</style>
